var jsession=document.cookie;
var gPanelMargin = '100,100,100,100';
var viewPort ; 
Ext.onReady(function(){	
	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    renderTo: Ext.getBody(),
	    items: [{
	        region: 'north',
	        height: 30,
	        border: false
	    }, {
	        region: 'west',
	        collapsible: false,
	        width: 550,
	        border: false
	        // could use a TreePanel or AccordionLayout for navigational items
	    }, {
	        region: 'south',
	        height: 500,
	        minHeight: 500,
	        border: false	        
	    },{
	        region: 'east',
	        width: 550,
	        border: false
	    }, {
	        region: 'center',
	    	xtype: 'form',
			title: 'Login',
			style: {
				width: '400px',
				height:'200px'
			},
			layout: {
				type: 'vbox',
				align: 'center'
			},
			items: [{
				fieldLabel: 'Username',
				name: 'utenti.username',
				xtype:'textfield',
				margin: '5,5,5,5',
				allowBlank: false
			},{	fieldLabel: 'Password',
				name: 'utenti.password',
				xtype:'textfield',
				inputType: 'password',
				margin: '5,5,5,5',
				allowBlank: false
			}
			]
			,
			fbar: [{
				xtype: 'button',
				text: 'Ok',
				formBind: true,
				disabled: false,
				handler: function(){
					var form = this.up('form').getForm();
					if(form.isValid()){
						doLogin(this,form);
		    		}
				}
			},{
				xtype: 'button',
				text: 'Annulla',
				handler: function(){
		    		  this.up('form').getForm().reset();
				}
			
			}]
	    }]
	});
});
			

	

function doLogin(theButton,theForm){
	document.body.innerHTML='';
	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    renderTo: Ext.getBody(),
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Page Title</h1>',
	        autoHeight: true,
	        border: false,
	        margins: '0 0 5 0'
	    }, {
	        region: 'west',
	        collapsible: true,
	        title: 'Navigation',
	        width: 150
	        // could use a TreePanel or AccordionLayout for navigational items
	    }, {
	        region: 'south',
	        title: 'South Panel',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }, {
	        region: 'east',
	        title: 'East Panel',
	        collapsible: true,
	        split: true,
	        width: 150
	    }, {
	        region: 'center',
	        xtype: 'tabpanel', // TabPanel itself has no title
	        activeTab: 0,      // First tab active by default
	        items: {
	            title: 'Default Tab',
	            html: 'The first tab\'s content. Others may be added dynamically'
	        }
	    }]
	});
	
}

function drawAdminWindow(){
	Ext.get('login').setVisible(false);
	Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:["name", "email", "phone"],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {dataIndex: "name",header: "Name"  },
        {dataIndex: "email",header: "Email",  flex:1},
        {dataIndex: "phone",header: "Phone" }
    ],
    height: '480px',
    width: '100%',
    renderTo: Ext.getBody()	
});
}
 